{% extends "base.html" %}
{% block title %} Список локаций {% endblock %}

{% block css-js %}
    {#    {% load static %}#}
    {#    <script src="{% static '' %}"></script>#}
{% endblock %}

{% block content %}

    <div class="centered m-4 text-center">
        Всего локаций: {{ spisok }}
    </div>

    <div class="centered m-3">
        <table class="table border border-dark">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Город</th>
                <th scope="col">Штат</th>
                <th scope="col">Почтовый индекс</th>
                <th scope="col">Широта</th>
                <th scope="col">Долгота</th>
            </tr>
            </thead>
            <tbody>
            <div class="card, overflow-y-scroll tabindex=0 ">
                <ul class="card-text overflow-hidden" id="my-table" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">

                    {% if page_obj %}
                        {% for foo in page_obj %}
                            <tr>
                                <td><a href="./locations/{{ foo.id }}">{{ foo.id }}</a></td>
                                <td>{{ foo.city }}</td>
                                <td>{{ foo.state }}</td>
                                <td>{{ foo.zipcode }}</td>
                                <td>{{ foo.latitude }}</td>
                                <td>{{ foo.longitude }}</td>
                            </tr>
                        {% endfor %}

                        <div class="row justify-content-between">
                            <div class="col">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}">Предыдущая</a>
                                {% endif %}
                            </div>

                            <div class="col">
                            </div>

                            <div class="col-md-4 offset-md-4">
                                {% if page_obj.has_next %}
                                    <a class="" href="?page={{ page_obj.next_page_number }}">Следующая</a>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                </ul>
            </div>
            </tbody>
        </table>
    </div>

{% endblock %}